import React from 'react'
import { Form, Input, Button, message } from 'antd'
import universalFetch, { handleFetchError } from 'store/modules/fetch'
const FormItem = Form.Item
import styles from './DictEdit.css'
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 }
  }
}
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0
    },
    sm: {
      span: 14,
      offset: 6
    }
  }
}

type Props = {
  history: Object,
  form: Object
}

type State = {
  loading: boolean,
  taskData: Object
}

class DictEdit extends React.Component {
  props: Props
  state: State
  submit: Function
  constructor (props: Props) {
    super(props)
    this.state = {
      loading: false,
      taskData: {}
    }

    this.submit = this.submit.bind(this)
  }

  componentWillMount () {
    const { data } = this.props.history.location.state
    this.setState({
      taskData: data
    })
  }

  submit () {
    const { form } = this.props
    form.validateFields((err, fieldsValue) => {
      if (err) {
        return false
      }
      this.setState({
        loading: true
      })
      const values = {
        ...fieldsValue
      }
      const { taskData } = this.state
      universalFetch(`${__SERVICE_API__}sys/dicts/${taskData.id}`,
        {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          },
          body: JSON.stringify(values)
        })
        .then((res) => res.json())
        .then((json) => {
          if (json.code !== 200000) {
            throw new Error(JSON.stringify({ code: json.code, message: json.message }))
          }
          this.setState({
            loading: false
          })
          message.success('修改成功')
          this.props.history.push('/system/dictSetting')
        })
        .catch((error) => {
          handleFetchError(error)
          console.error(error)
          message.error('修改失败')
          this.setState({
            loading: false
          })
        })
    })
  }

  render () {
    const { getFieldDecorator } = this.props.form
    const { taskData } = this.state
    return (
      <div className={styles['main']}>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label='显示名称'
            hasFeedback
          >
            {getFieldDecorator('label', {
              rules: [{ required: true, message: '请填写显示名称', whitespace: true }],
              initialValue: taskData.label
            })(
              <Input placeholder='请填写显示名称' />
            )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label='回填内容'
            hasFeedback
          >
            {getFieldDecorator('value', {
              rules: [{ required: true, message: '请填写回填内容', whitespace: true }],
              initialValue: taskData.value
            })(
              <Input placeholder='请填写回填内容' />
              )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label='字典类型'
          >
            {getFieldDecorator('type', {
              rules: [{ required: false, message: '请填写字典类型' }],
              initialValue: taskData.type
            })(
              <Input placeholder='type' />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label='类型描述'
          >
            {getFieldDecorator('typeCn', {
              rules: [{ required: false, message: '请填写类型描述' }],
              initialValue: taskData.typeCn
            })(
              <Input placeholder='请填写类型描述' />
            )}
          </FormItem>
          <FormItem {...formItemLayout} label='显示顺序' hasFeedback>
            {
              getFieldDecorator('sort', {
                rules: [
                  { required: true, message: '请填写显示顺序', whitespace: true }
                ],
                initialValue: taskData.sort
              })(
                <Input placeholder='请填写显示顺序' />
              )
            }
          </FormItem>
          <FormItem
            {...tailFormItemLayout}
          >
            <Button type='primary'
              className='login-form-button'
              onClick={this.submit}
              >
              提交
            </Button>
            <Button style={{ marginLeft: '20px' }}
              onClick={() => {
                this.props.history.push('/system/dictSetting')
              }}
              >
              返回
            </Button>
          </FormItem>
        </Form>
      </div>
    )
  }
}
export default Form.create()(DictEdit)
